<template>
  <div class="flights" v-if="airInfo">
    <div class="flightsMain">
      <!-- 筛选 -->
      <flightFilter
        :options="airInfo.options"
        :info="airInfo.info"
        :flightsData="temp"
        @setFlight="setFlight"
      />
      <!-- 列表头部 -->
      <div class="flightsHeader">
        <el-row>
          <el-col :span="5">航空信息</el-col>
          <el-col :span="14">
            <el-row>
              <el-col :span="12">起飞时间</el-col>
              <el-col :span="12">到达时间</el-col>
            </el-row>
          </el-col>
          <el-col :span="5">价格</el-col>
        </el-row>
      </div>
      <!-- 查询不到 -->
      <div class="noData" v-if="airInfo.flights.length==0">
        没有查询到机票，请
        <nuxt-link to="/air">重新查询</nuxt-link>
      </div>
      <!-- 列表 -->
      <flightItem v-for="item in filterAir" :key="item.id" :data="item" />
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="airInfo.flights.length"
        v-if="airInfo.flights.length != 0"
      ></el-pagination>
    </div>
    <!-- 侧边信息展示 -->
    <div class="aside">
      <div class="statement">
        <div class="show">
          <div class="item">
            <i class="iconfont icon-renzheng"></i>
            <span>航协认证</span>
          </div>
          <div class="item">
            <i class="iconfont icon-baozheng"></i>
            <span>出行保证</span>
          </div>
          <div class="item">
            <i class="iconfont icon-dianhua"></i>
            <span>7×24</span>
          </div>
        </div>
        <p>免费客服电话：4006345678转2</p>
      </div>
      <history />
    </div>
  </div>
  <!-- 数据加载 -->
  <div
    class="loadingMask"
    v-else
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  ></div>
</template>

<script>
import flightItem from "@/components/air/flightItem";
import history from "@/components/air/history";
import flightFilter from "@/components/air/flightFilter";
export default {
  components: {
    flightItem,
    history,
    flightFilter,
  },
  data() {
    return {
      currentPage: 1, //当前页码
      pageSize: 5, //每页数量
      airInfo: null, //机票详情信息
      loading: true,
      temp: {},
      title: "",
    };
  },
  //可以进行seo优化，这只做title变化
  head() {
    return {
      title: this.title,
    };
  },
  created() {
    this.getAir();
  },
  computed: {
    //分页加载
    filterAir() {
      var arr = this.airInfo.flights.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      );
      return arr;
    },
  },
  watch: {
    $route() {
      this.getAir();
    },
    airInfo() {
      this.title = `${this.airInfo.info.departCity}到${this.airInfo.info.destCity}机票预定`;
    },
  },
  methods: {
    //获取机票
    getAir() {
      this.$axios({
        url: "/airs",
        params: this.$route.query,
      }).then((res) => {
        this.airInfo = res.data;
        this.temp = res.data.flights;
        this.loading = false;
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    setFlight(val) {
      this.airInfo.flights = val;
      this.currentPage = 1;
    },
  },
};
</script>

<style lang="less" scoped>
.loadingMask {
  min-height: 300px;
}
.flights {
  width: 1000px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .flightsMain {
    width: 745px;
    font-size: 14px;
    .flightsHeader {
      margin: 20px 0 10px 0;
      background: #f6f6f6;
      height: 38px;
      line-height: 38px;
      font-size: 12px;
      text-align: center;
      border: 1px solid #ddd;
      padding: 0 15px;
    }
    .noData {
      text-align: center;
      margin: 50px 0;
      a {
        color: #ffa500;
        text-decoration: underline;
      }
    }
    .el-pagination {
      text-align: center;
    }
  }
  .aside {
    width: 240px;
    .statement {
      border: 1px solid #ddd;
      margin-bottom: 10px;
      .show {
        display: flex;
        padding: 10px 0;
        .item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 12px;
          i {
            font-size: 40px;
          }
          span {
            margin-top: 5px;
          }
          .icon-renzheng {
            color: #409eff;
          }
          .icon-baozheng {
            color: #008000;
          }
          .icon-dianhua {
            color: #409eff;
          }
        }
      }
      p {
        font-size: 14px;
        padding: 5px 10px;
        background: #f6f6f6;
      }
    }
  }
}
</style>